import React, { useEffect, useState } from 'react';
import { Link, Outlet, useLocation } from 'react-router-dom';
import PublicHeader from '@/components/header';
import './index.less';

export default function MessagePage() {
    const [flagBarPos, setflagBarPos] = useState<string>('17%');
    const { pathname } = useLocation();

    useEffect(() => {
        let value: string = '';
        if (pathname === '/record/passed') {
            value = '17%';
        }
        if (pathname === '/record/audited') {
            value = '50%';
        }
        if (pathname === '/record/failed') {
            value = '83%';
        }
        setflagBarPos(value);
    }, [pathname]);

    return (
        <main className='container common-con-top'>
            <PublicHeader title='消息' confirm={false} record={false} />
            <section className='record-nav-con'>
                <nav className='record-nav'>
                    <Link to='passed' className='nav-link'>
                        全部
                    </Link>
                    <Link to='passed' className='nav-link'>
                        已读
                    </Link>
                    <Link to='audited' className='nav-link'>
                        未读
                    </Link>
                </nav>
                <i className='nav-flag-bar' style={{ left: flagBarPos }} />
            </section>
            <Outlet />
        </main>
    );
}
